﻿<!DOCTYPE html>
<html>

<head>
    <title>H5 audio Demo</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="css/audio.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="audio-wrapper">
        <audio>
            <source src="./file/凤飞飞 - 追梦人.mp3" type="audio/mp3">
        </audio>
        <div class="audio-left">
            <img id="audioPlayer0" src="./image/play.png">
        </div>
        <div class="audio-right">
            <p style="max-width: 536px;">凤飞飞 - 追梦人</p>
            <div class="progress-bar-bg" id="progressBarBg0">
                <span id="progressDot0"></span>
                <div class="progress-bar" id="progressBar0"></div>
            </div>
            <div class="audio-time">
                <span class="audio-length-current" id="audioCurTime0">00:00</span>
                <span class="audio-length-total">03:53</span>
            </div>
        </div>
    </div>

    <div class="audio-wrapper">
        <audio>
            <source src="./file/五月天 - 一颗苹果 (Live).mp3" type="audio/mp3">
        </audio>
        <div class="audio-left">
            <img id="audioPlayer1" src="./image/play.png">
        </div>
        <div class="audio-right">
            <p style="max-width: 536px;">五月天 - 一颗苹果</p>
            <div class="progress-bar-bg" id="progressBarBg1">
                <span id="progressDot1"></span>
                <div class="progress-bar" id="progressBar1"></div>
            </div>
            <div class="audio-time">
                <span class="audio-length-current" id="audioCurTime1">00:00</span>
                <span class="audio-length-total">04:53</span>
            </div>
        </div>
    </div>

    <div class="audio-wrapper">
        <audio>
            <source src="./file/古剑三 - 千秋.mp3" type="audio/mp3">
        </audio>
        <div class="audio-left">
            <img id="audioPlayer2" src="./image/play.png">
        </div>
        <div class="audio-right">
            <p style="max-width: 536px;">古剑三 - 千秋</p>
            <div class="progress-bar-bg" id="progressBarBg2">
                <span id="progressDot2"></span>
                <div class="progress-bar" id="progressBar2"></div>
            </div>
            <div class="audio-time">
                <span class="audio-length-current" id="audioCurTime2">00:00</span>
                <span class="audio-length-total">03:18</span>
            </div>
        </div>
    </div>
</body>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="js/audio.js"></script>

</html>